<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刘姝含的页面</title>
    <style>
        .box{
            width: 900px;
            height: 300px;
            background-color: rgb(23, 123, 157);
            margin: auto;  
            position: relative; /* 父容器相对定位，作为子元素绝对定位的参考 */
        }
        .box1{
            width: 200px;
            height: 100px;
            background-color:rgb(153, 23, 23);
            padding: 40px 0 0 20px; /* 合并padding属性，优化写法 */
            font-size: 20px;
            font-weight: bold;
            color: azure;
        }
        .box1A{
            width: 200px;
            height: 100px;
            padding: 5px 0 0 3px;
            font-size: 10px;
            color: azure;
        }
        /* 关键修改1：给box2添加相对定位和z-index，确保层级高于静态定位元素 */
        .box2{
            width: 200px;
            height: 160px;
            background-color:rgb(160, 174, 109);
            background-image: url("1.jpg");
            background-size: cover;
            position: relative; /* 改为相对定位，可设置z-index */
            z-index: 1; /* 层级设为1，高于默认的auto（静态定位元素） */
        }
        .box3{
            width: 700px;
            height: 170px;
            background-color:rgb(75, 153, 23);
            position: absolute;
            top: 0;
            right: 0;
        }
        /* 关键修改2：将中文分号“；”改为英文分号“;”，修复right属性 */
        .box4{
            width: 700px;
            height: 130px;
            background-color:rgb(11, 84, 22);
            position: absolute;
            top: 170px;
            right: 0; /* 修复：中文分号→英文分号 */
        }
        .box3A{
            width: 400px;
            height: 170px;
            background-color:rgb(72, 106, 158);
            background-image: url("2.jpg");
            background-size: cover;
            float: left;
        }
        .box3B{
            width: 100px;
            height: 170px;
            background-color:rgb(165, 205, 124);
            float: left;
        }
        .box3B1{
            width: 30px;
            height: 5px;
            float: right;
            
            padding: 10px 5px 0 3px;
            font-size: 20px;
            font-weight: bold;
            color: azure;
        }
        .box3B2{
            width: 1px;
            height: 60px;
            float: right;
            padding: 10px 5px 0px 13px;
            font-size: 10px;
            color: azure;
            
            transform: translate(-115%, -30%) rotate(90deg); /* 先居中再转 90° */
            white-space: nowrap;
        }
        .box3C{
            width: 200px;
            height: 170px;
            background-color:rgb(216, 128, 27);
            float: left;
            background-image: url("3.jpg"); /* 修复：路径去掉多余斜杠，与其他图片保持一致 */
            background-size: cover;
            background-position: right;
        }
        .box4A{
            width: 230px;
            height: 130px;
            background-color:rgb(94, 178, 154);
            float: right;
            background-image: url("5.jpg"); /* 修复：路径去掉多余斜杠 */
            background-size: cover;
        }
        .box4B{
            width: 230px;
            height: 130px;
            background-color:rgb(31, 145, 44);
            float: right;
            background-image: url("4.jpg"); /* 修复：路径去掉多余斜杠 */
            background-size: cover;
        }
        .box4C{
            width: 230px;
            height: 30px;
            padding: 40px 0 0 50px;
            font-size: 20px;
            font-weight: bold;
            color: azure;
        }
        .box4D{
            width: 230px;
            height: 25px;
            padding: 5px 0 0 50px;
            font-size: 10px;
            color: azure;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">校园风光
            <div class="box1A">XLAO YUAN FENG GUANG</div>
        </div>
        <div class="box2"></div> <!-- 显示校园风光图片（1.jpg） -->
        <div class="box3">
            <div class="box3A"></div> <!-- 学术研究图片1（2.jpg） -->
            <div class="box3B">
                <div class="box3B1">学术研究</div>
                <div class="box3B2">XUE SHU YAN JIU</div>
            </div>
            <div class="box3C"></div> <!-- 学术研究图片2（3.jpg） -->
        </div>
        <div class="box4">
            <div class="box4A"></div> <!-- 学生活动图片1（5.jpg） -->
            <div class="box4B"></div> <!-- 学生活动图片2（4.jpg） -->
            <div class="box4C">学生活动</div>
            <div class="box4D">XUE SHENG HUO DONG</div>
        </div>
    </div>
</body>
</html>